<!--
 * @Date: 2023-02-21 10:00:48
 * @LastEditTime: 2023-05-24 14:22:23

 * 介绍:
-->
<script lang="ts" setup>
import omit from "lodash/omit";
const props = withDefaults(
  defineProps<{
    active?: StrNumber;
    swipeable?: boolean;
    animated?: boolean;
    shrink?: boolean;
    type?: "card" | "line";
    color?: string;
    background?: string;
    duration?: StrNumber;
    lineWidth?: StrNumber;
    lineHeight?: StrNumber;
    border?: boolean;
    ellipsis?: boolean;
    sticky?: boolean;
    lazyRender?: boolean;
    offsetTop?: StrNumber;
    swipeThreshold?: StrNumber;
    titleActiveColor?: string;
    titleInactiveColor?: string;
    beforeChange?: (name: number | string) => boolean | Promise<boolean>;
    scrollspy?: boolean;
    /**边距 */
    gap?: string;
  }>(),
  {
    swipeable: true,
    animated: true,
    lazyRender: true,
    sticky: true,
    type: "line",
    offsetTop: "110rem",
    gap: "var(--gap-md)",
  }
);
const emit = defineEmits<{
  (e: "update:active", v: StrNumber): void;
  (
    e: "click-tab",
    v: {
      name: string | number;
      title: string;
      event: MouseEvent;
      disabled: boolean;
    }
  ): void;
  (e: "change", v: StrNumber): void;
  (e: "rendered", v: StrNumber): void;
  (e: "scroll", v: { scrollTop: number; isFixed: boolean }): void;
}>();
const $active = computed({
  get() {
    return props.active;
  },
  set(v) {
    emit("update:active", v!);
  },
});
const $props = computed(() => omit(props, ["gap"]));
</script>

<template>
  <VanTabs
    :style="{ '--Rtabs-gap': props.gap }"
    class="Rtabs"
    v-bind="$props"
    @click-tab="(e) => emit('click-tab', e)"
    @change="(e) => emit('change', e)"
    @rendered="(e) => emit('rendered', e)"
    @scroll="(e) => emit('scroll', e)"
    v-model:active="$active"
  >
    <slot></slot>
    <template #nav-left><slot name="nav-left"></slot> </template>
    <template #nav-right> <slot name="nav-right"></slot></template>
    <template #nav-bottom><slot name="nav-bottom"></slot> </template>
  </VanTabs>
</template>

<style lang="scss">
.Rtabs {
  margin-right: calc(0rem - var(--Rtabs-gap));
  margin-left: calc(0rem - var(--Rtabs-gap));
  .van-tabs__wrap {
    height: auto;
    margin-left: var(--Rtabs-gap);
    margin-right: var(--Rtabs-gap);
    padding-bottom: var(--gap-xs);
    padding-top: var(--gap-xs);

    & + * {
      margin-left: var(--Rtabs-gap);
      margin-right: var(--Rtabs-gap);
    }
    .van-tabs__nav {
      height: auto;
      margin-left: 0;
      margin-right: 0;
    }
    .van-tabs__nav--line {
      overflow-y: initial;
      padding-bottom: var(--gap-xs);
    }
    .van-tabs__nav--card {
      border-radius: var(--R-xs);
    }
    .van-tabs__line {
      bottom: 0;
    }
    .van-tab--card {
      line-height: 1.8em;
    }
    .van-tab--disabled {
      opacity: 0.6;
    }
  }
  .van-sticky--fixed {
    --Rtabs-fixed-bg: var(--C-B1);
    --Rtabs-fixed-color: var(--C-T1);
    color: var(--Rtabs-fixed-color);
    background-color: var(--Rtabs-fixed-bg);
    transition: all 500ms ease-in-out;
  }
  .van-tabs__content {
    .van-tabs__track {
      overflow: initial;
      .van-tab__panel-wrapper {
        margin-top: var(--Rtabs-gap);
        padding: 0 var(--Rtabs-gap);
      }
    }
  }
}
</style>
